import {messages} from "share/common";
/**
 *  created by jsq on 2017/9/21
 */
import React from 'react'
import { connect } from 'react-redux'
import { Button, Form, Select,Input, Col, Row, Switch, message, Icon } from 'antd';
import budgetService from 'containers/budget-setting/budget-organization/budget-item/budget-item.service'
import menuRoute from 'routes/menuRoute'
import ListSelector from 'components/list-selector'
import "styles/budget-setting/budget-organization/budget-item/new-budget-item.scss"
import { LanguageInput } from 'components/template';

const FormItem = Form.Item;

class NewBudgetItem extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      loading: false,
      organization: {},
      showItemType: false ,
      variationAttribute:[],
      listSelectedData: [],
      statusCode: messages('common.status.enable'),  /*启用*/
      i18n: {}
    };
  }
  componentWillMount(){
    typeof this.props.organization.organizationName === "undefined" ?
      budgetService.getOrganizationById(this.props.params.id).then((response) =>{
        this.setState({
          organization: response.data,
        })
      })
      :
      this.setState({
        organization: this.props.organization,
      })
  }
  //新建预算项目
  handleSave = (e) =>{
    this.setState({loading: false});
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        const { organization: { id }, i18n } = this.state;
        values.organizationId = id;
        values.itemTypeId = values.itemTypeName[0].key;
        values.i18n = i18n;
        budgetService.addItem(values)
          .then((response) => {
            if (response) {
              message.success(messages('budget-setting.key31'/*保存成功！*/)); /*保存成功！*/
              response.data.organizationName = values.organizationName;
              this.context.router
                .push(menuRoute.getMenuItemByAttr('budget-organization', 'key')
                .children
                .budgetItemDetail
                .url
                .replace(':id', this.props.params.id)
                .replace(':itemId', response.data.id));
            }
          })
          .catch((e) => {
            if (e.response) {
              message.error(`${messages('common.save.filed')}, ${e.response.data.message}`);
            }
          })
          .finally(() => {
            this.setState({ loading: false });
          });
      }
    });
  };

  handleFocus = () => {
    this.refs.blur.focus();
    this.showList(true)
  };

  showList = (flag) => {
    let listSelectedData = [];
    let values = this.props.form.getFieldValue("itemTypeName");
    if (values && values.length > 0) {
      values.map(value => {
        listSelectedData.push(value.value)
      });
    }
    this.setState({
      showItemType: flag,
      listSelectedData
    })
  };

  handleListOk = (result) => {
    let values = [];
    result.result.map(item => {
      values.push({
        key: item.id,
        label: item.itemTypeName,
        value: item,
      })
    });
    let value = {};
    value["itemTypeName"] = values;
    this.props.form.setFieldsValue(value);
    this.showList(false)
  };

  handleCancel = (e) =>{
    e.preventDefault();
    this.context.router.push(menuRoute.getMenuItemByAttr('budget-organization', 'key').children.budgetOrganizationDetail.url.replace(':id', this.props.params.id)+  '? tab=ITEM');
  };


  handleI18n = (name, value, tag) => {
    let { i18n, itemName, description } = this.state;
    if (tag === 'input') {
      i18n.itemName = value;
      itemName = name;
    } else {
      i18n.description = value;
      description = name;
    }
    this.setState({ itemName, description, i18n });
  };


  render(){
    const { getFieldDecorator } = this.props.form;
    const { loading, organization, statusCode, showItemType, listSelectedData, itemName, description, i18n } = this.state;

    return (
      <div className="new-budget-item">
        <div className="budget-item-form">
          <Form onSubmit={this.handleSave} className="budget-structure-form">
            <Row gutter={60}>
              <Col span={8}>
                <FormItem
                  label={messages('budget-setting.key47'/*预算组织*/)}  /*{/!*预算组织*!/}*/
                  colon={true}>
                  {getFieldDecorator('organizationName', {
                    initialValue: organization.organizationName,
                  })(
                    <Input disabled/>)
                  }
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem
                  label={messages('budget-setting.key44'/*预算项目代码*/)} /* {/!*预算项目代码*!/}*/
                  colon={true}>
                  {getFieldDecorator('itemCode', {
                    rules:[
                      {required:true,message:messages('common.please.enter')},
                    ]
                  })(
                    <Input placeholder={messages('common.please.enter')}
                    />)
                  }
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem
                  label={messages('budget-setting.key45'/*预算项目名称*/)} /* {/!*预算项目名称*!/}*/
                  colon={true}>
                  {getFieldDecorator('itemName', {
                    rules:[
                      {required:true,message:messages('common.please.enter')},
                    ]
                  })(
                    <LanguageInput
                      name={itemName}
                      i18nName={i18n.itemName || null}
                      nameChange={(name, itemName) => this.handleI18n(name, itemName, 'input')}
                      placeholder={messages('common.please.enter')/* 请输入 */}/>
                  )}
                </FormItem>
              </Col>
            </Row>
            <Row gutter={60}>
              <Col span={8}>
                <FormItem
                  label={messages('budget-setting.key46'/*预算项目类型*/) /*预算项目类型*/}
                  colon={true}>
                  {getFieldDecorator('itemTypeName', {
                    rules:[
                      {required:true,message:messages('common.please.select')},/* {/!*请输入*!/}*/
                    ],
                  })(
                    <Select
                      labelInValue
                      onFocus={this.handleFocus}
                      placeholder={messages('common.please.select')} />) /*请输入*/
                  }
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem
                  label={messages('budget-setting.key55'/*备注*/) /*预算项目描述*/}
                  colon={true}>
                  {getFieldDecorator('description', {
                    rules:[
                    ]
                  })(
                    <LanguageInput
                      name={description}
                      i18nName={i18n.description || null}
                      nameChange={(name, description) => this.handleI18n(name, description, 'texArray')}
                      placeholder={messages('common.please.enter')/* 请输入 */}
                      mainLanguageIsRequired={false}/>
                      )}
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem
                  label={messages('common.status',{status:statusCode})} /* {/!*状态*!/}*/
                  colon={false}>
                  {getFieldDecorator("isEnabled", {
                    initialValue: true,
                    valuePropName: 'checked',
                    rules:[
                      {
                        validator: (item,value,callback)=>{
                          this.setState({
                            statusCode: value ? messages('common.status.enable') /*启用*/
                              : messages('common.disabled') /*禁用*/
                          })
                          callback();
                        }
                      }
                    ],
                  })
                  (<Switch  checkedChildren={<Icon type="check" />} unCheckedChildren={<Icon type="cross"/>}/>)
                  }
                </FormItem>
              </Col>
            </Row>
            <Button type="primary" loading={loading} htmlType="submit">{messages('common.save') /*保存*/}</Button>
            <Button  onClick={this.handleCancel} style={{ marginLeft: 8 }}> {messages('common.cancel') /*取消*/}</Button>
            <input ref="blur" style={{ position: 'absolute', top: '-9999vh' }}/> {/* 隐藏的input标签，用来取消list控件的focus事件  */}
          </Form>
        </div>
        <ListSelector
          single={true}
          visible={showItemType}
          type="budget_item_type"
          onCancel={()=>this.showList(false)}
          onOk={this.handleListOk}
          selectedData={listSelectedData}
          extraParams={{organizationId: this.props.params.id,isEnabled: true}}/>
      </div>
    )
  }
}
NewBudgetItem.contextTypes = {
  router: React.PropTypes.object
};
function mapStateToProps(state) {
  return {
    organization: state.budget.organization
  }
}
const WrappedNewBudgetItem = Form.create()(NewBudgetItem);
export default connect(mapStateToProps)(WrappedNewBudgetItem);
